<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import = "com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-datetimepicker.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>

<script type="text/javascript">
	function ajaxCall(method, url, callBackFunction, select) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, true);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(date);
	}

	function clearTable() {
		var tb = document.getElementById('table1');
		var rowNum = tb.rows.length;
		for (i = 1; i < rowNum; i++) {
			tb.deleteRow(i);
			rowNum = rowNum - 1;
			i = i - 1;
		}
	}

	function search() {
		clearTable();
		var y = document.getElementById('tarea1').value;
		var targetdate = document.getElementById("s1").value;
		document.getElementById("operation").value = document
				.getElementById("s1").value;
// 		alert(y);
		ajaxCall("Post", "../DateBaseServlet", showInTable, y);
	}
	
	function showInTable(result) {
// 		alert(result);
		var obj = JSON.parse(result);
// 		alert(obj.length);
// 		alert(obj[1].length);
// 		var m = '"0"';
		for (i in obj) {
			var newTr = document.getElementById("table1").insertRow();
			var newTdDate = newTr.insertCell();

			for (var j in obj[i]) {
// 				alert(obj[i][j]);
				var newTd = newTr.insertCell();
				newTd.innerText = obj[i][j];
				
			}
		}

	}
	<%
	User user = (User) request.getSession().getAttribute("user");
	String img = (String) user.getImg();
	%>
	
</script>

<body>
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>


					<!-- 					<li><a href="../index.jsp"><i -->
					<!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
					<!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
					<!-- 							个人信息</a></li> -->
					<li><a href="TeacherSelfExam.jsp"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="TeamGrade.jsp"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="grouping.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="StudentScore.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="DataBaseSelect.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>

					<!-- 					<li><a href="ChangePassword.jsp"><i -->
					<!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->

				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">

				<div class="container">
					<fieldset>
						<legend>数据库查询</legend>

						<textarea id="tarea1" rows="10" cols="120"
							style="background: transparent"></textarea>
						<br />
						<div class="col-sm-offset-2 col-sm-10"
							style="padding: 10px 0px 0px 0px">
							操作:<select id="s1" style="width: 200px">
								<option value="SELECT">SELECT</option>
								<option value="UPDATE">UPDATE</option>
								<option value="DELETE">DELETE</option>
							</select>
							<button class="btn btn-primary" onclick="search()">生成结果</button>
						</div>






						<div class="row" style="padding: 50px 20px 0px 20px">

							<div class="table-responsive">
								<table class="table table-striped" id="table1"
									style="text-align: center">
									<thead>
										<tr>

										</tr>
									</thead>

									<tbody>


									</tbody>
								</table>
								<input type="text" id="operation" style="display: none"/>
							</div>
						</div>
						<div class="col-sm-offset-5 col-sm-7">
							<input id="ebutton" type="button" value="导出EXCEL"
								onClick="getXlsFromJsp('table1')" class="btn btn-primary"
								style="display: none">
						</div>
					</fieldset>
				</div>
				<!-- /. PAGE INNER  -->
			</div>
			<!-- /. PAGE WRAPPER  -->
		</div>

		<!-- /. WRAPPER  -->
		<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
		<!-- JQUERY SCRIPTS -->
		<script src="../js/jquery-1.10.2.js"></script>
		<!-- BOOTSTRAP SCRIPTS -->
		<script src="../js/bootstrap.min.js"></script>
		<!-- METISMENU SCRIPTS -->
		<script src="../js/jquery.metisMenu.js"></script>






		<script type="text/javascript" src="../js/bootstrap-datetimepicker.js"
			charset="UTF-8"></script>
		<script type="text/javascript" src="../js/AjaxAPI.js" charset="UTF-8"></script>
		<script src="../js/jquery.dataTables.js"></script>

		<script type="text/javascript">
			
		</script>
</body>
</html>
